<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    class="bgImages"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 举报 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore text=""></yy-nomore>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <!-- 请选择举报类型 -->
      <!-- 请选择举报类型 -->
      <!-- 请选择举报类型 -->
      <view class="text-[.875rem] text-[#171B24]"> 请选择举报类型*</view>
      <view class="grid grid-cols-3 gap-4">
        <view
          class="col-span-1 flex justify-center items-center rounded-[1.125rem] py-2 border border-solid"
          v-for="(i, k) in reportData"
          :key="k"
          @click="report_type = i.id"
          :class="
            report_type == i.id
              ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB] '
              : 'text-[#171B24] bg-[#F4F6F8]  border-transparent'
          "
        >
          <text class="text-[.75rem]">{{ i.name }}</text>
        </view>
      </view>
      <!-- 描述举报内容* -->
      <!-- 描述举报内容* -->
      <!-- 描述举报内容* -->
      <view class="text-[.875rem] text-[#171B24] mt-4"> 描述举报内容*</view>
      <view class="bg-[#F4F6F8] rounded-[.75rem] flex flex-col gap-2 p-4">
        <textarea
          maxlength="200"
          placeholder="请描述举报内容"
          class="w-full text-[.875rem] text-[#171B24]"
          v-model="report_content"
          rows="5"
        ></textarea>
        <view class="flex justify-between">
          <text></text>
          <text class="text-[.75rem] text-[#C1C4C9]">{{ report_content.length }}/200</text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="text-[.875rem] text-[#171B24] flex gap-1 items-center mt-4">
        <text>上传图片*</text>
        <text class="text-[.75rem] text-[#C1C4C9]">{{ iamgesList.length }}/3</text>
      </view>
      <view class="grid grid-cols-3 gap-3">
        <view
          class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center relative border overflow-hidden"
          v-for="(i, k) in iamgesList"
          :key="k"
        >
          <image
            :src="i"
            class="size-full"
            mode="aspectFill"
            @click="
              vk.myfn.previewImage({
                urls: iamgesList,
                current: k
              })
            "
          />
          <view
            @click="deleteImage(k)"
            class="w-[1.25rem] h-[1.25rem] bg-[#000000]/40 rounded-[0rem_.5rem_0rem_.5rem] absolute right-0 top-0 flex justify-center items-center"
          >
            <u-icon name="close" color="#fff" size="20"></u-icon>
          </view>
        </view>
        <view
          v-if="iamgesList.length < 3"
          @click="uploads"
          class="bg-[#F4F6F8] rounded-[.5rem] aspect-square flex justify-center items-center"
        >
          <image src="/static/dddr39.png" class="size-[1.75rem]" mode="aspectFill" />
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="pb-env">
        <view class="px-4 py-3" style="">
          <button
            @click="submit"
            class="btn after:border-none flex justify-center rounded-full h-[2.75rem] items-center"
            :class="disabled ? '!bg-[#00A9AB]/60' : '!bg-[#00A9AB]'"
            :disabled="disabled"
            :loading="loading"
          >
            <view class="text-[1rem] text-[#E5F6F6]">提交</view>
          </button>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        action: 'http://www.example.com/upload', // 上传图片的URL
        reportData: [], // 举报类型数据
        //
        iamgesList: [], // 图片列表
        report_content: '', // 举报内容
        report_type: '', // 举报类型
        client: null, // 客户端对象
        options: {}, // 页面参数
        disabled: false,
        loading: false
      }
    },
    onLoad(options) {
      this.options = options
      this.getReportTypes()
    },
    methods: {
      async uploads() {
        try {
          const url = await vk.myfn.uploadImage({
            count: 3,
            topic: 'products'
          })
          this.iamgesList.push(...[].concat(url))
        } catch (err) {
          console.error('上传失败:', err)
        }
      },

      deleteImage(k) {
        this.iamgesList.splice(k, 1)
      },
      // 提交
      async submit() {
        vk.pubfn.debounce(async () => {
          if (!this.report_content) {
            vk.toast('请输入举报内容')
            return
          }
          if (!this.iamgesList.length) {
            vk.toast('请上传图片')
            return
          }
          vk.showLoading('提交中...')
          this.disabled = true
          this.loading = true

          const data = {
            type: this.options.type, // 目标类型: 1 = 钓点
            target_id: this.options.id, // 目标的唯一ID
            report_type: this.report_type, // 举报类型: 1 = 其他
            report_content: this.report_content, // 举报内容: 这里填写具体的举报信息
            images: this.iamgesList.join('|') // 图片列表: 多张图片用|分隔
          }
          let res = await api.reportBasan(data)
          vk.hideLoading()
          this.disabled = false
          this.loading = false

          if (!res.code) return
          vk.toast(res.msg, 'none', e => {
            vk.navigateBack()
          })
        }, 500)
      },
      // 获取举报类型
      async getReportTypes() {
        let res = await api.reportType()
        if (!res.code) return
        this.reportData = res.data
        this.report_type = res.data[0].id
      },
      //
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bgImages,
  page {
    background-color: #fff !important;
  }
</style>
